<template>
  <div class="permission-container">
    <el-card class="card group">
      <template #header>
        <div class="card-header">
          <span>权限分组</span>
        </div>
      </template>
      <ul class="infinite-list">
        <li
          :class="{ active: item.name === selectItem }"
          ref="groupItem"
          v-for="item in groupData"
          :key="item.id"
          @click="onDefinitionList(item.name)"
          class="infinite-list-item"
        >
          {{ item.displayName }}
        </li>
      </ul>
    </el-card>
    <el-card class="card permission">
      <el-table :data="permissionData" :border="true" row-key="id" :default-expand-all="true">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="displayName" label="描述" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type {
  PermissionGroupDefinitionDto,
  PermissionDefinitionDto,
  PermissionDefinitionViewDto
} from '@/utils/api/permission/type';
import {
  getPermissionGroupDefinitionListAsync,
  getPermissionDefinitionListAsync
} from '@/utils/api/permission/index';

// 选中的分组
const selectItem = ref<string>();

// 分组数据
const groupData = ref<Array<PermissionGroupDefinitionDto>>([]);
onMounted(async () => {
  groupData.value = await getPermissionGroupDefinitionListAsync();

  // 默认选中第一个分组
  if (groupData.value && groupData.value.length > 0) {
    selectItem.value = groupData.value[0].name;
    onDefinitionList(selectItem.value);
  }
});

// 选中的分组下的权限列表
const permissionData = ref<Array<PermissionDefinitionViewDto>>([]);
const onDefinitionList = async (groupName: string) => {
  selectItem.value = groupName;
  const permissionDefinitionList = await getPermissionDefinitionListAsync(groupName);
  permissionData.value = convertTree(permissionDefinitionList, null);
};

// 权限转化成树形结构
const convertTree = (
  data: Array<PermissionDefinitionDto>,
  parentName?: string | null
): Array<PermissionDefinitionViewDto> => {
  let arrays = new Array<PermissionDefinitionViewDto>();
  let dataList = data.filter((it) => it.parentName === parentName);
  dataList.forEach((item) => {
    let tree: PermissionDefinitionViewDto = {
      id: item.id,
      name: item.name,
      displayName: item.displayName,
      isEnabled: item.isEnabled,
      providers: item.providers,
      stateCheckers: item.stateCheckers,
      multiTenancySides: item.multiTenancySides,
      children: convertTree(data, item.name)
    };
    arrays.push(tree);
  });
  return arrays;
};
</script>
<style scoped lang="scss">
.permission-container {
  display: flex;
  height: 100%;
  .group {
    width: 20%;
    margin-right: 20px;
  }
  .permission {
    flex-grow: 1;
  }
  .card {
    height: 100%;
  }
}
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
  .infinite-list-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    padding-left: 5px;
  }
}
</style>
